<template>
    <n-tabs default-value="约友申请" justify-content="space-evenly" type="line">
        <n-tab-pane name="约友申请" tab="约友申请">
            <div class="f-box">
                <draggable v-model="friendRequest" @start="onStart" @end="onEnd">
                    <transition-group>
                        <div class="friend-item" v-for="item in friendRequest" :key="item.id">
                            <img v-if="item.avatar" class="user-avatar" :src="item.avatar"
                                 alt="author"/>
                            <img v-else class="user-avatar" src="@/assets/images/user/default-author.png"
                                 alt="author"/>
                            <div class="friend-name">
                                <n-ellipsis style="max-width: 4.5rem">
                                    {{ item.nickname }}
                                    <template #tooltip>
                                        <div style="text-align: center">
                                            {{ item.nickname }}
                                        </div>
                                    </template>
                                </n-ellipsis>
                            </div>
                            <div class="friend-reason">
                                <span style="font-weight: bold;">申请理由：</span>{{ item.remark }}
                            </div>
                            <span class="friend-time">
                                        发送时间:{{ formatDate(item.createTime) }}
                                    </span>
                            <div class="button-box">
                                <div class="button-box">
                                    <n-button size="tiny" type="success"
                                              @click="handelRequest(item, 1)">
                                        <span style="color: var(--text-color)">同意</span>
                                    </n-button>
                                    <n-button size="tiny" type="warning"
                                              @click="handelRequest(item, 2)">
                                        <span style="color: var(--text-color)">拒绝</span>
                                    </n-button>
                                </div>
                            </div>
                        </div>
                    </transition-group>
                </draggable>
            </div>
        </n-tab-pane>
        <n-tab-pane name="我的申请" tab="我的申请">
            <div class="ir-box">
                <draggable v-model="friendRequest" @start="onStart" @end="onEnd">
                    <transition-group>
                        <div class="i-item" v-for="item in friendRequest" :key="item.id">
                            <img v-if="item.avatar" class="user-avatar" :src="item.avatar"
                                 alt="author"/>
                            <img v-else class="user-avatar" src="@/assets/images/user/default-author.png"
                                 alt="author"/>
                            <div class="i-name">
                                <n-ellipsis style="max-width: 3rem">
                                    {{ item.nickname }}
                                    <template #tooltip>
                                        <div style="text-align: center">
                                            {{ item.nickname }}
                                        </div>
                                    </template>
                                </n-ellipsis>
                            </div>
                            <div class="i-reason">
                                <span style="font-weight: bold">申请理由：</span>{{ item.remark }}
                            </div>
                            <span class="i-time">
                                        发送时间：{{ formatDate(item.createTime) }}
                                    </span>
                            <div class="button-box">
                                <n-button size="tiny" type="success">
                                    <span style="color: var(--text-color)">查看</span>
                                </n-button>
                            </div>
                        </div>
                    </transition-group>
                </draggable>
            </div>
        </n-tab-pane>
    </n-tabs>
</template>

<script setup lang="ts">
import {formatDate} from "@/utils/date";
import {RequestVO} from "@/api/request/types";
import {getFR, getIR} from "@/api/request";
import useStore from "@/store";
import useWebSocket from "@/utils/websocket";
import {DataContent} from "@/model/chat";

const {user, chat} = useStore();

const webSocket = user.id !== undefined ? useWebSocket(handleMessage) : null;

const friendRequest = ref([] as RequestVO[])
const iRequest = ref([] as RequestVO[])
const data = reactive({
    drag: false,
})

const {drag} = toRefs(data)
const onStart = () => {
    drag.value = true;
}
const onEnd = () => {
    drag.value = false;
}

const getFriendRequest = () => {
    getFR().then(({data}) => {
        if (data.flag) {
            friendRequest.value = data.data;
        }
    })
}
const getIRequest = () => {
    getIR().then(({data}) => {
        if (data.flag) {
            iRequest.value = data.data;
        }
    })
}

/**
 * 处理好友请求
 * @param friend 好友申请
 * @param type (1同意 2拒绝)
 */
const handelRequest = (friend: RequestVO, type: number) => {
    webSocket?.send(JSON.stringify({
        action: 6,
        chatRequest: {
            roomId: friend.roomId,
            fromUid: friend.fromUid,
            toUid: user.id,
            type: type,
            remark: friend.remark,
        },
    } as DataContent));
}

/**
 * socket消息处理函数
 * @param content
 */
function handleMessage(content: any) {
    let str = JSON.parse(content.data);

}

onMounted(() => {
    if (user.id !== undefined) {
        getFriendRequest();
        getIRequest();
    }
})
</script>

<style scoped lang="scss">
.f-box {
  width: 100%;

  .friend-item {
    position: relative;
    width: 100%;
    padding: 0.2rem;
    border-radius: 0.2rem;
    box-shadow: 0 0 0.1rem var(--box-shadow);
    margin-top: 0.2rem;
    color: var(--main-2-h8);

    &:hover {
      box-shadow: inset 0 0 0.1rem var(--box-shadow-c);
    }

    .user-avatar {
      width: 0.8rem;
      height: 0.8rem;
    }

    .friend-name {
      width: 4.5rem;
      font-size: 1.2em;
      font-weight: bold;
      position: absolute;
      top: 0.35rem;
      left: 1.2rem;
      color: var(--main-1);
    }

    .friend-user-num {
      position: absolute;
      top: 1.2rem;
      right: 0.2rem;
    }

    .friend-time {
      position: absolute;
      top: 0;
      right: 0.2rem;
      text-align: right;
    }

    .button-box {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 0.2rem;
      gap: 0.3rem;
    }
  }
}

.ir-box {
  width: 100%;
  margin: 0 auto;
  color: var(--main-2-h8);

  .i-item {
    display: inline-block;
    width: 48%;
    position: relative;
    padding: 0.2rem;
    border-radius: 0.2rem;
    box-shadow: inset 0 0 0.1rem var(--box-shadow);
    margin: 1%;
    vertical-align: middle;

    &:hover {
      box-shadow: 0 0 0.1rem var(--box-shadow-c);
    }

    .user-avatar {
      width: 0.8rem;
      height: 0.8rem;
    }

    .i-name {
      position: absolute;
      top: 0.3rem;
      left: 1.2rem;
      font-weight: bold;
      font-size: 1.2em;
      color: var(--main-1);
    }

    .i-user-num {
      position: absolute;
      bottom: 0.15rem;
      left: 0.2rem;
    }

    .button-box {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 0.2rem;
      gap: 0.2rem;
    }
  }
}
</style>